<template>
	<view>
		<mescroll-uni :down="downOption" @down="downCallback" @up="upCallback">	
			<view v-for="(item,index) in comments_list" :key="index">
				<tui-card :image="item.image_url" :title="item.nick_name" :tag="item.created_at" :full="true"  :border="true">
					<template v-slot:body>
						<view class="tui-content">
							{{item.content}}
						</view>
						<view class="tui-default tui-flex-pic">
							<image v-for="(it,ind) in item.images"  :key="ind" :src="it.url" mode="widthFix"></image>
						</view>
					</template>
				</tui-card>
			</view>
		</mescroll-uni>	
	</view>
</template>
<script>
	import tuiCard from "@/components/card/card"
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
	import ProductCommentsList from './product_comments_list-model.js'   
	var product_comments_list = new ProductCommentsList(); 
	export default {
		components: {
			tuiCard,
			MescrollUni
		},
		data() {
			return {
				id:'',//商品id
				downOption: {},
				total:0,
				//商品页码
				page:1,
				comments_list:[]
			}
		},
		onLoad: function(options) {
			var that = this;
			that.id = options.id;
		},	
		methods: {
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				try{
					var that = this;
					that.page = 1;
				} catch (e) {
					mescroll.endErr();
				}
				mescroll.resetUpScroll();
			},
			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
			upCallback(mescroll) {
					var that = this;
					that.product_comments_list((res)=>{
						mescroll.endBySize(res.data.length, res.total);
					})
			},
			//商品列表
			product_comments_list(callback){
				var that = this;
				product_comments_list.product_comments_list(that.page,that.id,(res)=>{
					if(res.code == 8888){
						if(res.data.current_page == 1){
							for(var i=0;i<res.data.data.length;i++){
								res.data.data[i].image_url = {"url":res.data.data[i].image_url};
								res.data.data[i].created_at = {"text":res.data.data[i].created_at};
								res.data.data[i].nick_name = {"text":res.data.data[i].nick_name};
							}
							that.comments_list = res.data.data;
							that.total = res.data.total;
						}else{
							for(var i=0;i<res.data.data.length;i++){
								res.data.data[i].image_url = {"url":res.data.data[i].image_url};
								res.data.data[i].created_at = {"text":res.data.data[i].created_at};
								res.data.data[i].nick_name = {"text":res.data.data[i].nick_name};
								that.comments_list.push(res.data.data[i]);
							}
						}
					}
					if(callback){
						if(that.page < res.data.last_page){
							that.page = that.page + 1;
						}
						callback(res.data);
					}
				});
			}
		}
	}
</script>

<style>
	@import url("product_comments_list.css");
</style>
